<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数码首页</title>

    <script src="../js/vue.js"></script>

    <link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-china-area-data@6.0.0/dist/element-china-area-data.iife.js"></script>


    <link rel="shortcut icon" type="image/x-icon" href="../image/logo.png"/>
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
    <link rel="stylesheet " type="text/css" href="../css/index.css"/>
    <link rel="stylesheet " type="text/css" href="../css/ProdDetail.css"/>
</head>
<body>
<div class="digital">
    <!-- 头部 -->
    <div class="head">
        <div class="head-x ">
            <div class="head-x-css">
							<span class="layui-breadcrumb" lay-separator="|">
						 <a id="login_state" href="login.html">您好，请登录</a>
						  <a href="register.html">免费注册</a>
						  <a href="#">帮助中心</a>
						  <a href="#">客服</a>

						</span>

            </div>
        </div>
        <!-- 搜索框 -->
        <div class="head-s">
            <ul class="head-s-css">

                <li class="css-logo"><img src="../image/logo.png"/></li>
                <li class="css-text">
                    <ul class="text-ul1">
                        <li class="text"><input  id="content" type="text" name="title"   placeholder=" 请输入搜索内容"  class="text-input"/> </li>
                        <li class="text-s">  <a  id="select"  class="text-btn" href="javascript:void(0)"  ><img src="../image/搜索.png"/></a>  </li>

                    </ul>



                    <ul class="layui-tab-title">
                        <li class="layui-this"><a href="index.html"> 首页</a></li>
                        <li><a  href="type.html#电脑整机"  id="typename01" > 手机款式</a></li>
                        <li><a    href="type.html#电脑整机" id="typename02"> 电脑整机</a></li>
                        <li><a    href="type.html#家电类型" id="typename03"> 家电类型</a></li>
                        <li><a    href="type.html#影音娱乐" id="typename04"> 影音娱乐</a></li>
                        <li><a    href="type.html#摄影摄像" id="typename05"> 摄影摄像</a></li>
                    </ul>
                </li>
                <!--头像-->
                <li class="css-touxiang"><a href="#"> <img id="touxiang" src="../image/个人中心.png"/>
                    <p>个人中心</p>
                </a></li>

                <!-- 购物车 -->
                <li class="css-vehicle">
                    <div class="vehicle-img"><a href="#"> <img src="../image/购物车.png"/> </a></div>
                    <div  class="vehicle-text"> <span><a href="ShoppingCart.html">   我的购物车    </a></span></div>
                </li>


            </ul>

        </div>


    </div>

    <!-- 主体 -->
    <div class="main" id="prods">
        <div class="main-in" >
            <div class="main-in-left">{{name}}</div>
            <div class="main-in-right">
						<span class="layui-breadcrumb" lay-separator="|">
						  <a href="#" onclick="mark()">用户评价</a>
						</span>
            </div>
        </div>
        <div style="width: 100%;height: auto;box-shadow: 0px 3px 6px  #CCCCCC;">
            <hr/>
        </div>

        <div class="main-main">
            <div class="main-pics">
                <el-carousel height="576px" width="560px">
                    <el-carousel-item v-for="p in pics">
                        <img :src="p">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="main-paramter">
                <div style="margin-bottom: 20px;"><h2>{{name}}</h2></div>
                <div style="margin: 20px auto;"><p style="color: #ff6700;">小米自营</p></div>
                <hr/>
                <div class="main-paramter-addr">
                    <div><img src="../image/addr.png"></div>
                    <div class="addr-info">
                            <el-cascader
                                    size="large"
                                    :options="regionData"
                                    v-model="selectedOptions" style="width: 300px">
                            </el-cascader>
                    </div>
                    <div class="banlance-judge"><span style="color: #ff6700;">{{stock}}</span></div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>选择版本</legend>
                </fieldset>
                <div>
                    <ul class="select-version">
                        <li v-for="m in memorySizes"><a class="selected version" href="javascript:void(0)"
                                                        onclick="upCss1(this)">{{m}}</a></li>
                    </ul>
                </div>

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>选择颜色</legend>
                </fieldset>
                <div>
                    <ul class="select-color">
                        <li v-for="c in colors"><a class="selected color" href="javascript:void(0)"
                                                   onclick="upCss2(this)">{{c}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="after">
            <div class="after-service">
                <a href="https://s1.mi.com/m/faq/giving/index.html?project_id=44"><img src="../image/service.png"></a>
            </div>
            <div class="select-list">
                <div class="select-list-p">
                    <span>{{name}}</span>
                    <span>{{memorySize}}</span>
                    <span>{{color}}</span>
                </div>
                <span class="total-price" style="color: #ff6700;">总计：{{prices}}元</span>
                <a class="addcart" href="javascript:void(0)" onclick="addCart()">添加购物车</a>
            </div>
        </div>
        <div class="main-last">
            <img src="../image/explain.png">
        </div>

    </div>


    <!-- 尾部 -->
    <div class="footer">

        <p>商务合作邮箱：v@maoyan.com 客服电话：10105335
            违法和不良信息/涉未成年人有害信息举报电话：4006018900</p>

        <p>用户举报/涉未成年人有害信息举报邮箱：tousujubao@meituan.com
            舞弊线索举报邮箱：wubijubao@maoyan.com</p>

        <p>中华人民共和国增值电信业务经营许可证 京B2-20190350 营业性演出许可证
            京演（机构）（2019）4094号 </p>
    </div>
</div>
</body>

<script src="../layui/layui.js"></script>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/axios.js"></script>


<script type="text/javascript">



    function upCss1(obj) {
        $(".version").css("color", "black");
        $(".version").css("border", "1px solid #e0e0e0");
        $(obj).css("color", "#ff6700");
        $(obj).css("border", "1px solid #ff6700");
        let text = $(obj).text();
        v.memorySize = text;
        $.get("../parameter?op=FindPrice", {memorySize: text}, function (rs) {
            if (rs.code == 200) {
                let Price = '';
                Price = rs.data[0].price;
                v.prices = Price;
            } else {
                layer.msg(rs.msg);
            }
        }, 'json');
    }

    function upCss2(obj) {
        $(".color").css("color", "black");
        $(".color").css("border", "1px solid #e0e0e0");
        $(obj).css("color", "#ff6700");
        $(obj).css("border", "1px solid #ff6700");
        let text = $(obj).text();
        v.color = text;
    }


    layui.use(['carousel', 'form'], function () {


        //检查是否登录
        lg();
        //计数
        count();



    });

    let path = window.location.hash;
    //地址必须是detail.html#3
    if(path.indexOf("#") < 0){
        //地址不正确 跳转到电影页面
        window.location.href = 'index.html';
    }

    let pId =  path.substring(1) ;//获取pId
    let uId;


    //检测是否登录
    function lg() {


        //session里存储   uId
        $.get("../user",{op:"determine" },function (rs) {

            if(rs !=null){

                $("#login_state").text("在线！"); // 修改文本
                uId= rs;

            }

        },"json");


    }


    //计数
    function count() {

        $.get("../prodDetails",{op:"count",pId:pId },function (rs) {

            if(rs >0){

            }

        },"json");


    }




    function mark() {

        // 存储数据
        localStorage.setItem('pId', pId);
        window.location.href = 'mark.html' ;

    }






    $("#select").click(function () {

        let pName = $("#content").val();
        if( pName!=null && ""!=pName){

            //session里存储   pName
            $.get("../prodDetails",{op:"cpName",pName:pName },function (rs) {


                if(rs!=null){
                    window.location.href = 'index.html';
                }


            },"json");


        }
        else{

            alert('暂无相关商品！！！');
        }


    });



    //跳转用户个人信息页面
    $("#touxiang").click(function () {

        window.location.href = 'personal.html';

    });






    var v = new Vue({
        el: '#prods',
        data: {
            prods: [],

            pId: pId,
            regionData: elementChinaAreaData.regionData,
            codeToText: elementChinaAreaData.codeToText,
            selectedOptions:'', //选择之后的地址
            pics: [],
            colors: [],
            memorySizes: [],
            prices: '',
            memorySize: '',
            color: '',
            stock: '',
            name: '',
            address:''
        },
        methods: {
            async send() {
                await axios.get('../parameter?op=FindByPid&pId=' + this.pId).then(rs1 => {
                    if (rs1.status == 200) {
                        this.prods = rs1.data.data;
                        changePics(this.prods);
                        changeColor(this.prods);
                        changeMemory(this.prods);
                        /!*changePrice(this.prods);*!/
                    }
                });
                await axios.get('../prodDetails?op=FindBalance&pId=' + this.pId).then(rs2 => {
                    if (rs2.status == 200) {
                        if (rs2.data.data.stock > 0) {
                            this.stock = '有现货';
                        } else {
                            this.stock = '该地区暂时缺货';
                        }
                    }
                });
                await  axios.get('../prodDetails?op=FindName&pId=' + this.pId).then(rs3 => {
                    if (rs3.status == 200) {
                        this.name = rs3.data.data.pName;
                    }
                });
            },
        },

        mounted: function () {
            this.send();
        },
        watch:{
            selectedOptions(new_value,old_value){
                let address1 = new_value[0];
                let address2 = new_value[1];
                let address3 = new_value[2];
                // console.log(new_value[2]);
                // console.log(new_value[0]);
                // console.log(address1);
                // codeToText
                // var str= new_value[2];
                // console.log(this.codeToText[str]);
                this.address = this.codeToText[address1]+this.codeToText[address2]+this.codeToText[address3];

            }
        }
    });



    function changePics(arr) {
        let fpics = '';
        for (let i = 0; i < arr.length; i++) {
            if (fpics.indexOf(arr[i].paramImage) < 0) {
                fpics += arr[i].paramImage + ";";
            }
        }
        if (fpics.lastIndexOf(";") > 0) {
            fpics = fpics.substr(0, fpics.lastIndexOf(";"));
        }
        v.pics = fpics.split(";")

    }

    function changeColor(arr) {
        let colors = '';
        for (let i = 0; i < arr.length; i++) {
            if (colors.indexOf(arr[i].color) < 0) {
                colors += arr[i].color + ";";
            }
        }
        if (colors.lastIndexOf(";") > 0) {
            colors = colors.substr(0, colors.lastIndexOf(";"));
        }
        v.colors = colors.split(";")
    }

    function changeMemory(arr) {
        let memory = '';
        for (let i = 0; i < arr.length; i++) {
            if (memory.indexOf(arr[i].memorySize) < 0) {
                memory += arr[i].memorySize + ";";
            }
        }
        if (memory.lastIndexOf(";") > 0) {
            memory = memory.substr(0, memory.lastIndexOf(";"));
        }
        v.memorySizes = memory.split(";")
    }


    /*function changePrice(arr) {
        let prices = '';
        for (let i = 0; i < arr.length; i++) {
            if(prices.indexOf(arr[i].price) < 0){
                prices += arr[i].price + ";";
            }
        }
        if(prices.lastIndexOf(";") > 0){
            prices = prices.substr(0,prices.lastIndexOf(";"));
        }
        v.prices = prices.split(";")
    }*/

    function addCart() {

        if (v.memorySize == "" || v.memorySize == null || v.color == "" || v.color == null) {
            layui.use('layer', function () { //独立版的layer无需执行这一句
                var layer = layui.layer; //独立版的layer无需执行这一句
                layer.alert("请选择商品参数！");
            });
            return;
        }
        $.get('../parameter?op=find', {pId:pId, color: v.color, memorySize: v.memorySize}, function (rs) {
            if (rs.code == 200) {
                let paramId = rs.data;
                $.get("../cart?op=addCart", {  paramId: paramId, cNumber: 1}, function (rs) {
                    if (rs.code == 200) {
                        layui.use('layer', function () { //独立版的layer无需执行这一句
                            var layer = layui.layer; //独立版的layer无需执行这一句
                            layer.alert("添加购物车成功！");
                        });
                    }
                }, 'json');
            }
        }, 'json');

        $.get('../address?op=addAddress',{  aName:v.address},function (rs){
            if(rs.code == 200){
                console.log(rs);
            }
        },'json');

    }


</script>

</html>
